<template>
    <div class="mains">
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="name" label="名字" width="180" />
            <el-table-column prop="date" label="提交时间" width="180" />
            <el-table-column prop="tal" label="电话" />
            <el-table-column prop="pic" label="交易金额" />
            <el-table-column prop="states" label="订单状态" />
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button link type="success" size="small">编辑</el-button>
                    <el-button link type="danger" size="small" @click.prevent="deleteRow(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="length" v-model:current-page="page" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
interface listType {
    name: string,
    date: string,
    tal: string,
    pic: number,
    id: string,
    states: string
}
const route = useRoute()
const list = ref<listType[]>([])
const length = ref<number>()
const page = ref<number>(1)
const getListAxios = async (page: number) => {
    const resp = await axios.get('/api/list', { params: { page: page } })
    list.value = resp.data.list
    length.value = resp.data.lengths
}
const deleteRow = (id: string) => {
    ElMessageBox.confirm('确认要删除该项数据吗?')
		.then(async () => {
			const resp = await axios.delete('/api/list/' + id);
			const { code, message } = resp.data;
			if (code === 200) {
				ElMessage({
					type: 'success',   
					message
				})
				getListAxios(page.value)
			}
		})
		.catch(() => {
			console.log('取消删除')
		})
}
onMounted(() => {
    getListAxios(page.value)
})
watch(page, () => {
    getListAxios(page.value)
})
</script>
<style lang="scss">
.mains {
    width: 100%;
    height: 100%;
}
</style>